import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    View,
    Text,
    DeviceEventEmitter, TextInput,
} from 'react-native';
import Header from '../../widgets/Header';
import {getffly, isEmail, ishaveSpecial} from '../../utils/common';
import screen from '../../utils/screen';
import {observer,inject} from 'mobx-react';
import {useStores} from '../../store';
import {LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import AppEvent from '../../utils/AppEvent';
import Constants from '../../utils/Constants';
import Selection from '../../widgets/SelectionB';


export default class WithdrawSet extends React.Component{

    constructor(props){
        super(props)

        this.choosedata = {}
        this.selection = null;
        this.setSelectionRef = (element) => {
            this.selection = element;
        };

    }

    state={
        name:'',
        phone:'',
        email:'',
        bank:'',
        account:'',
        paytm:'',
        error_name: '',
        error_phone: '',
        error_email: '',
        error_ifsc: '',
        error_account: '',
        error_paytm: '',
        bankList:[]
    }

    componentDidMount() {
        const { withdrawal } = this.props.navigation.state.params;

        console.log('withdrawal:' + JSON.stringify(withdrawal))

        if(withdrawal.bank){
            for (var i = 0; i < withdrawal.bankList.length; i++) {
                if (withdrawal.bankList[i].code == withdrawal.bank) {
                    str1 = withdrawal.bankList[i].name;
                    this.choosedata = withdrawal.bankList[i];
                    break;
                }
            }
        }

        console.log('banklist:' + JSON.stringify(withdrawal.bankList))

        withdrawal && this.setState({
            name:withdrawal.realName,
            phone:withdrawal.phone,
            email:withdrawal.email,
            bank:withdrawal.bank,
            bankList:withdrawal.bankList,
            account:withdrawal.account,
            paytm:withdrawal.paytm?withdrawal.paytm:'',
        })
    }

    onclick_sx = (str) => {
        console.log("str::", str);
        this.choosedata = str;
        this.setState({
            bank: str.name,
        });
    }

    checkEnable(){

        let isEnable = true

        this.setState({
            error_name: '',
            error_phone: '',
            error_email: '',
            error_bank: '',
            error_account: '',
            error_paytm: '',
        })

        if(this.state.name.length < 4){
            isEnable = false
            this.setState({
                error_name: Constants.error.at_least_4_characters
            });
            console.log('checkEnable: name at_least_4_characters')

        }else if(ishaveSpecial(this.state.name)){
            isEnable = false
            this.setState({
                error_name: Constants.error.invalid_real_name
            });

        }

        if (this.state.phone.length < 6) {
            isEnable  = false
            this.setState({
                error_phone: Constants.error.at_least_6_characters
            });
            console.log('checkEnable: phone at_least_6_characters')

        }

        if(!isEmail(this.state.email)){
            isEnable  = false
            this.setState({
                error_email: Constants.error.invalid_email_address
            });
            console.log('checkEnable: email invalid_email_address')

        }


        if(this.state.account.length < 4){
            isEnable = false
            this.setState({
                error_account: Constants.error.at_least_4_characters
            });
            console.log('checkEnable: bank at_least_4_characters')

        }

        if(this.state.paytm.length < 4){
            isEnable = false
            this.setState({
                error_paytm: Constants.error.at_least_4_characters
            });
            console.log('checkEnable: bank at_least_4_characters')

        }


        console.log('checkEnable:' + isEnable)

        return isEnable
    }

    submit () {
        AppModal.showLoading()
        let params = {
            "realName": this.state.name,
            "account": this.state.account,
            "phone": this.state.phone,
            "bank": this.choosedata.code,
            "email": this.state.email,
            "paytm": this.state.paytm,
        }

        console.log('withdrawset.update:' + JSON.stringify(params))

        RequestUtil.post(Api.withdrawUpdate,params,true).then(res=>{
            AppModal.hideTip()
            AppModal.showTip("Successfully modified");

        },error=>{
            AppModal.hideTip()
            console.log(error)
            AppModal.showError(error.msg)
        })
    }

    renderSubmit () {

        return <LGBtn style={{width:'100%',height:screen.PIXEL_90,marginTop:screen.PIXEL_60}} title={Constants.account.submit}
               onPress={()=> {
                    if(this.checkEnable()){
                        this.submit()
                    }
               } }
        />

    }

    render(){

        return (
            <View style={styles.container}>
                <Header title={Constants.account.withdrawal_account} navigation={this.props.navigation}/>

                <ScrollView
                        style={{flex:1,marginBottom:screen.PIXEL_20}}
                        contentContainerStyle={{
                            paddingVertical:screen.PIXEL_20,
                            paddingHorizontal:screen.PIXEL_40,
                        }}
                    >
                    <Text style={{color:'#FF7012',fontSize:12}}>{Constants.login.warning_tips_1}</Text>

                    <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_20}}>{Constants.login.real_name}</Text>

                    <TextInput
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        placeholder={''}
                        maxLength={30}
                        style={styles.input}
                        value={this.state.name}
                        onChangeText={(text) => {
                            this.setState({
                                name: text
                            })
                        }}
                    />
                    <View style={{ height: screen.PIXEL_40, alignSelf: 'flex-end', alignItems: 'center' }}>
                        <Text style={{  color: '#FF0000', fontSize: 12 }}>{this.state.error_name}</Text>
                    </View>

                    <Text style={{fontSize: 12,color:'#000'}}>{Constants.login.mobile_number}</Text>

                    <TextInput
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        placeholder={''}
                        maxLength={30}
                        style={styles.input}
                        value={this.state.phone}
                        onChangeText={(text) => {
                            this.setState({
                                phone: text
                            })
                        }}
                    />
                    <View style={{ height: screen.PIXEL_40, alignSelf: 'flex-end', alignItems: 'center' }}>
                        <Text style={{  color: '#FF0000', fontSize: 12 }}>{this.state.error_phone}</Text>
                    </View>

                    <Text style={{fontSize: 12,color:'#000'}}>{Constants.login.email_address}</Text>
                    <TextInput
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        placeholder={''}
                        maxLength={30}
                        style={styles.input}
                        value={this.state.email}
                        onChangeText={(text) => {
                            this.setState({
                                email: text
                            })
                        }}
                    />
                    <View style={{ height: screen.PIXEL_40, alignSelf: 'flex-end', alignItems: 'center' }}>
                        <Text style={{  color: '#FF0000', fontSize: 12 }}>{this.state.error_email}</Text>
                    </View>

                    <Text style={{fontSize: 12,color:'#000'}}>{'Momo'}</Text>
                    <View>
                        <TextInput
                            allowFontScaling={false}
                            placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                            placeholder={''}
                            maxLength={30}
                            style={styles.input}
                            value={this.state.paytm}
                            onChangeText={(text) => {
                                this.setState({
                                    paytm: text
                                })
                            }}
                        />
                    </View>
                    <View style={{ height: screen.PIXEL_40, alignSelf: 'flex-end', alignItems: 'center' }}>
                        <Text style={{  color: '#FF0000', fontSize: 12 }}>{this.state.error_paytm}</Text>
                    </View>

                    <Text style={{fontSize: 12,color:'#000'}}>{Constants.login.bank}</Text>
                    <TouchableOpacity activeOpacity={0.7} style={styles.input} onPress={() => {
                          this.selection.onclick1("Select bank", this.state.bank, this.state.bankList);
                    }} >
                        <View>
                            <Text style={styles.input}>{this.state.bank}</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{ height: screen.PIXEL_40, alignSelf: 'flex-end', alignItems: 'center' }}>
                        <Text style={{  color: '#FF0000', fontSize: 12 }}>{this.state.error_ifsc}</Text>
                    </View>

                    <Text style={{fontSize: 12,color:'#000'}}>{Constants.login.account_number}</Text>
                    <TextInput
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        placeholder={''}
                        maxLength={30}
                        style={styles.input}
                        value={this.state.account}
                        onChangeText={(text) => {
                            this.setState({
                                account: text
                            })
                        }}
                    />
                    <View style={{ height: screen.PIXEL_40, alignSelf: 'flex-end', alignItems: 'center' }}>
                        <Text style={{  color: '#FF0000', fontSize: 12 }}>{this.state.error_account}</Text>
                    </View>

                    {this.renderSubmit()}

                </ScrollView>
                <Selection ref={this.setSelectionRef} callback={this.onclick_sx} taget={this} list={this.state.bankList} />

            </View>
        )
    }
}

const styles= StyleSheet.create({
    container:{
        flex:1
    },
    content:{
        flex:1,
        paddingHorizontal:screen.PIXEL_60
    },
    input:{
        fontFamily:getffly("bold"), height: screen.PIXEL_60, width: '100%', color: '#377C74',
        textAlign: 'center', padding: 0, fontSize: 16,
        borderBottomWidth:1,borderBottomColor:'rgba(32,32,32,0.3)'
    },
    btnGray:{
        width:'100%',height:screen.PIXEL_90,marginTop:screen.PIXEL_60,borderRadius:screen.PIXEL_90/2,
        backgroundColor:'#C1C1C1',justifyContent:'center',alignItems:'center'
    }
})
